<template>
  <el-button style="background-color:#2752fb;border-radius: 0px;color: white;margin-bottom: 10px" @click="add"> 添加角色
  </el-button>
  <el-dialog v-model="dialogVisible" title="新增角色" width="500">
    <span>
      <Rolealertform :ruleForm="ruleForm" :rules="rules" :ruleFormRef="ruleFormRef" :formSize="formSize"
        :submitForm="submitForm" :offalert="offalert" />
    </span>
  </el-dialog>
</template>

<script lang="ts" setup>
import { adduser } from "../api/login";
import { ElMessageBox, ElMessage } from "element-plus";
import Rolealertform from "./rolealertform.vue";
const dialogVisible = ref(false);
import { reactive, ref, } from "vue";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
let y = defineProps(["render"]);
//关闭添加弹框
const offalert = () => {
  dialogVisible.value = false;
};
interface RuleForm {
  name: string;
  state: number,
  description: string;
}
const add = () => {
  dialogVisible.value = true;
};
const formSize = ref<ComponentSize>("default");
const ruleFormRef = ref<FormInstance>();
//表单数据
let ruleForm = ref<RuleForm>({
  name: "",
  state: 0,
  description: "",
});
//表单验证
const rules = ref<FormRules<RuleForm>>({
  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
  description: [{ required: true, message: "请输入角色描述", trigger: "blur" }],
});
//点击添加按钮
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log(ruleForm);
      //添加
      adduser(ruleForm.value).then((res) => {
        console.log(ruleForm);
        ElMessage({
          message: "添加成功",
          type: "success",
        });
        offalert();
        y.render();
        ruleForm.value = {
          name: "",
          state: 0,
          description: "",
        };
      });
    } else {
      console.log("2!", fields);
    }
  });
};
</script>

<style scoped></style>
